<template>
    <div class="big">
        <div class="div1">
        <div>明星教师</div>
    </div>
    <div class="div2">
        <el-card class="box-card" shadow="never">
            <div class="box"><img src="../assets/images/u453.png" alt=""><span>筛选</span></div>
            <div class="box2">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item label="输入搜索：">
                        <el-input v-model="teacher_name" placeholder="输入教师的姓名......" />
                    </el-form-item>
                    <el-form-item label="上传时间：">
                        <el-col :span="11">
                            <el-date-picker v-model="startTime" type="date" placeholder="开始日期"
                                style="width: 100%" />
                        </el-col>
                        <el-col :span="2" class="text-center">
                            <span class="text-gray-500">-</span>
                        </el-col>
                        <el-col :span="11">
                            <el-date-picker v-model="endTime" type="date" placeholder="结束日期"
                                style="width: 100%" />
                        </el-col>
                    </el-form-item>
                    <el-form-item>
                        <el-button class="btn" type="primary" @click="search">
                            <img src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%AE%A1%E7%90%86/u450.png"
                                alt="" />筛选
                        </el-button>
                        <!-- 清空筛选条件按钮 -->
                        <span class="btn1" @click="reset">清空筛选条件</span>
                    </el-form-item>
                </el-form>
            </div>
        </el-card>
        <el-card class="box-card1" shadow="never">
            <!-- 新增、回收站按钮 -->
            <div class="l-top">
                <div class="lt-left">
                    <img style="vertical-align: middle"
                        src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%AE%A1%E7%90%86/u434.png"
                        alt="" />
                    <span class="ll-text">文章列表</span>
                </div>
                <div class="lt-right">
                    <!-- 新增轮播图按钮 -->
                    <el-button class="addBtn" type="primary" @click="Add">
                        <img src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%AE%A1%E7%90%86/u438.png"
                            alt="" />
                        <span style="margin-left: 5px">新增教师</span>
                    </el-button>
                    <!-- 回收站按钮 -->
                    <el-button class="delBtn" type="primary" @click="toBin">
                        <img src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%BD%AE%E6%92%AD%E5%9B%BE%E7%AE%A1%E7%90%86/u441.png"
                            alt="" />
                        <span style="margin-left: 5px">回收站</span>
                    </el-button>
                </div>
            </div>
            <!-- 表格 -->
            <div class="table">
                <el-table :data="tableData" style="width: 100%"
                    :header-cell-style="{ background: '#9137f3', color: '#ffffff', height: '60px', 'text-align': 'center' }" @selection-change="handleSelectionChange">
                    <el-table-column type="selection" width="55" label="全选" align="center" />
                    <el-table-column property="teacherName" label="教师姓名" width="120" align="center" />
                    <el-table-column label="教师头像" width="120" property="avatarUrl" align="center">
                        <template #default="scope">
                            <el-avatar :size="30" :src="scope.row.avatarUrl" />
                        </template>
                    </el-table-column>
                    <el-table-column property="position" label="职位" align="center" />
                    <el-table-column property="uploadPerson" label="上传人" align="center" />
                    <el-table-column property="uploadTime" label="上传时间" align="center" />
                    <el-table-column label="操作" width="180">
                        <template #default="scope">
                            <span class="btn1" @click="handleEdit(scope.row.id)">编辑</span>
                            <span class="btn1" @click="handleDelete(scope.row.id)">加入回收站</span>
                        </template>
                    </el-table-column>
                </el-table>
                <div class="bin" @click="allIn">
                    批量加入回收站
                </div>
            </div>
            <div class="total">
                <span style="font-family:'思源黑体';font-weight:400;">共</span>
                <span style="font-family:'思源黑体 Bold', '思源黑体 ,Regular';font-weight:700;color:#9137F3;">{{Math.ceil(total/limit)}}</span>
                <span style="font-family:'思源黑体';font-weight:400;">页/</span>
                <span style="font-family:'思源黑体 Bold', '思源黑体 Regular;', '思源黑体';font-weight:700;color:#9137F3;">{{total}}</span>
                <span style="font-family:'思源黑体';font-weight:400;">条数据</span>
                <el-pagination v-model:page-size="limit" :page-sizes="[10, 20, 30]" default background
                    @current-change="changePage" layout="prev, pager, next" :total="total" class="mt-4" />
            </div>
        </el-card>
    </div>
    </div>
</template>
<script setup>
import { ElCard, ElForm, ElFormItem, ElButton, ElInput, ElCol, ElTimePicker, ElDatePicker, ElTable, ElTableColumn, ElPagination, ElAvatar } from 'element-plus'
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from '../utils/http'
import { useRouter } from "vue-router";
let page = ref(1);
let limit = ref(10);
let total = ref(0);
const router = useRouter();
let teacher_name = ref("");
let startTime = ref("");
let endTime = ref("");
let ids = "";
let idS = [];
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
  console.log("multipleSelection", multipleSelection.value);
};

//循环取id
const getId = function () {
  for (let e of multipleSelection.value) {
    idS.push(e.id);
  }
  console.log(idS);
  for (let i = 0; i < idS.length; i++) {
    if (i == idS.length - 1) {
      ids += `ids=${idS[i]}`;
    } else {
      ids += `ids=${idS[i]}&`;
    }
  }
  console.log(5555, ids);
};
const allIn = () => {
  getId();
  axios({
    url: `/StarTeacher/updateByIds?${ids}`,
  }).then(({ data }) => {
    if (data.code == 0) {
      ElMessage({
        message: "批量加入回收站成功",
        type: "success",
      });
      getData();
    }
  });
};
const toDub = (n) => (n < 10 ? "0" + n : "" + n);
const toDate = (date) => {
  const oDate = new Date(date);
  return (
    oDate.getFullYear() +
    "-" +
    toDub(oDate.getMonth() + 1) +
    "-" +
    toDub(oDate.getDate())
  );
};
const search = () => {
  axios({
    url: "/StarTeacher/ConditionQuery",
    params: {
      teacher_name:teacher_name.value,
      startTime: toDate(startTime.value),
      endTime: toDate(endTime.value),
      page: page.value,
      limit: limit.value,
    },
  }).then(({ data }) => {
    if (data.code == 0) {
      tableData.value = data.data.list;
      total.value = data.data.totalCount;
    }
  });
};
const reset = () => {
    teacher_name.value = "";
    startTime.value = "";
    endTime.value = "";
    getData();
};
const Add = function () {
    router.push({
        name: 'TeacherAdd'
    })
}
const toBin = function () {
    router.push({
        name: 'TeacherBin'
    })
}
const handleEdit = function (id) {
    router.push({
        name: "TeacherEdit",
        query: { id: id }
    });
}
const handleDelete = (id) => {
    axios({
        url: "/StarTeacher/garbage",
        params: {
            id: id
        }
    }).then(({ data }) => {
        if (data.code == 0) {
            ElMessage({
                message: "加入回收站成功",
                type: "success",
            });
            getData();
        }
    });
};
const tableData = ref([])
let changePage = function (value) {
    page.value = value;
    getData();
};
const getData = function () {
    axios({
        url: '/StarTeacher/query',
        params: {
            page: page.value,
            limit: limit.value
        }
    }).then(({ data }) => {
        if (data.code == 0) {
            tableData.value = data.data.list;
            total.value = data.data.totalCount;
        } else {
            ElMessage.error("数据加载失败！");
        }
    });
}
onMounted(() => {
    getData();
});
</script>
<style lang="less">
.big{
    .div1 {
    height: 70px;
    display: flex;
    align-items: center;

    div {
        font-weight: 700;
        margin-left: 115px;
        font-size: 24px;
        color: rgb(145, 55, 243);
    }
}

.div2 {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    .box-card {
        width: 1100px;
        height: 130px;

        .box {
            margin-top: 16.8px;
            margin-left: 28.8px;
            display: flex;
            align-items: center;

            img {
                width: 16px;
                height: 16px;
            }

            span {
                font-family: '思源黑体';
                font-weight: 400;
                font-style: normal;
                font-size: 14px;
                color: #999999;
                margin-left: 3px;
            }
        }

        .box2 {
            margin-top: 24px;
            margin-left: 28.8px;
            display: flex;
            align-items: center;
        }
    }

    .box-card1 {
        width: 1100px;
        _height: 1100px;
        margin-top: 12px;
    }
}

.lt-left {
    margin-left: 28.8px;
    margin-top: 24px;
}

// .el-pagination {
//     float: right;
//     margin-top: 60px;
// }

.bin {
    color: #999999;
    font-size: 13px;
    cursor: pointer;
    float: left;
    margin-top: 60px;
}

.total {
    margin-top: 50px;
    margin-right: 28.8px;
    font-size: 12px;
    color: #333333;
    display: flex;
    align-items: center;
    float: right;
}

.lt-right {
    margin-top: 24px;
    margin-right: 28.8px;
}

.table {
    margin-top: 40px;
    margin-left: 28.8px;
    margin-right: 28.8px;
}

.el-card__body {
    padding: 0;
}

.text-gray-500 {
    margin-left: 15px;
}

.btn {
    background-color: #9137f3;
    border: 1px solid #9137f3;
}

//   清空筛选条件按钮
.btn1 {
    color: #9137f3;
    background-color: white;
    border: 1px solid white;
    margin-left: 20px;
    cursor: pointer;
}

.l-top {
    height: 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

// 轮播图列表文字
.ll-text {
    color: #666666;
    font-weight: 400;
    font-size: 14px;
    margin-left: 5px;
}

// 新增轮播图按钮
.addBtn,
.delBtn {
    background-color: white;
    border: 1px solid #9137f3;
    color: #9137f3;
}

.delBtn {
    margin-left: 22px;
}
}
</style>
<style>
.el-input__wrapper {
    width: 180px;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev {
    border-radius: 16px;
    border: 1px solid #9239f3;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev:hover {
    color: #ffffff;
    background-color: #9239f3;
}

.el-pagination.is-background .btn-next:disabled,
.el-pagination.is-background .btn-prev:disabled {
    color: #9239f3;
    background-color: #ffffff;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li {
    color: #9239f3;
    background-color: #ffffff;
    border: 1px solid #9239f3;
}

.el-pagination.is-background .btn-next,
.el-pagination.is-background .btn-prev,
.el-pagination.is-background .el-pager li:hover {
    color: #ffffff;
    background-color: #9239f3;
}

.el-pagination.is-background .el-pager li:not(.is-disabled).is-active {
    color: #ffffff;
    background-color: #9239f3;
}
</style>